<template>
	<!-- 我的采购 -->
	<!-- 顶部查询 -->
	<view class="content">
		<el-form ref="form" :model="form" label-width="80px" class="orderStatus">
			<el-form-item label="商品名称:" class="order">
				<el-input clearable v-model="form.Article_Name" style="width: 188px" placeholder="请输入商品名称"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleclick()">发布</el-button>
				<el-badge :value="limit2" class="mx-2">
				<el-button @click="myPurchase(true)" type="primary">申请记录</el-button>
				</el-badge>
				<el-badge :value="limit1" class="mx-2">
					<el-button @click="myPurchase(false)" type="info" plain>消息</el-button>
				</el-badge>
				<el-button @click="Select" type="success">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="tableData" @expand-change="ExpandChange" border :header-cell-style="{ 'text-align': 'center' }"
			:cell-style="{ 'text-align': 'center' }" style="width: 97%;" height="calc(100vh - 140px)">
			<el-table-column type="expand" width="55">
				<template v-slot="{row}">
					<el-table :data="row.orderData" border :header-cell-style="{ 'text-align': 'center' }"
						:cell-style="{ 'text-align': 'center' }" style="width: 97%;">
						<el-table-column type="index" label="序号" width="55"></el-table-column>
						<el-table-column label="商品名称" width="85" align="center">
							<template slot-scope="scope">
								<el-tooltip effect="dark" :content="scope.row.Article_Name" placement="top">
									<view class="text-ellipsis w-100">
										<text>{{scope.row.Article_Name}}</text>
									</view>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column prop="Quantity" label="交易量" width="85">
							<template slot-scope="scope">
								{{scope.row.Quantity}}{{scope.row.Unit}}
							</template>
						</el-table-column>
						<el-table-column prop="Amount" label="交易金额" width="85">
							<template slot-scope="scope">
								{{Number(scope.row.Amount)*Number(scope.row.Quantity)}}元
							</template>
						</el-table-column>
						<el-table-column prop="Collection_Amount" label="已付金额" width="85">
							<template slot-scope="scope">
								{{scope.row.Collection_Amount}}元
							</template>
						</el-table-column>
						<el-table-column prop="Collection_Amount" label="未付金额" width="85">
							<template slot-scope="scope">
								{{(Number(scope.row.Amount)*Number(scope.row.Quantity)-Number(scope.row.Collection_Amount)).toFixed(2)}}
							</template>
						</el-table-column>
						<el-table-column label="联系人">
							<template slot-scope="scope">
								<el-tooltip effect="dark" :content="scope.row.Seller_Contact" placement="top">
									<view class="text-ellipsis w-100">
										<text>{{scope.row.Seller_Contact}}</text>
									</view>
								</el-tooltip>
							</template>
						</el-table-column>
						<el-table-column :show-overflow-tooltip="true" effect="dark" prop="Enterprise_Name" label="对方企业"
							width="150"></el-table-column>
					</el-table>
					<view v-if="Number(row.total)>0" class="flex justify-between">
						<view class="">

						</view>
						<el-pagination background @size-change="handleSizeChange1(row)"
							@current-change="handleCurrentChange1" :current-page="Number(row.form.page)"
							:page-sizes="[1,5,10,20]" :page-size="Number(row.form.limit)"
							layout="total, sizes, prev, pager, next, jumper" :total="Number(row.total)">
						</el-pagination>
					</view>
				</template>
			</el-table-column>
			<el-table-column type="index" label="序号" width="55"></el-table-column>
			<el-table-column prop="Article_Name" label="商品名称" width="85" align="center">
				<template v-slot="{row}">
					<el-tooltip effect="dark" :content="row.Article_Name" placement="top">
						<view class="text-ellipsis w-100">
							<text>{{row.Article_Name}}</text>
						</view>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column prop="Total_Quantity" label="需求总量" width="85">
				<template v-slot="{row}">
					<text>{{row.Total_Quantity}}{{row.Unit}}</text>
				</template>
			</el-table-column>
			<el-table-column prop="Starting_Quantity" label="起步量" width="70">
				<template v-slot="{row}">
					<text>{{row.Starting_Quantity}}{{row.Unit}}</text>
				</template>
			</el-table-column>
			<el-table-column prop="Acquisition_Quantity" label="已收购量" width="85">
				<template v-slot="{row}">
					<text>{{row.Acquisition_Quantity}}{{row.Unit}}</text>
				</template>
			</el-table-column>
			<el-table-column prop="Residue_Quantity" label="剩余需求量">
				<template v-slot="{row}">
					<text>{{row.Residue_Quantity}}{{row.Unit}}</text>
				</template>
			</el-table-column>
			<el-table-column prop="Amount" label="商品价格">
				<template v-slot="{row}">
					<text>￥{{row.Amount}}</text>
				</template>
			</el-table-column>
			<el-table-column prop="Contacts" label="联系人">
				<template v-slot="{row}">
					<el-tooltip effect="dark" :content="row.Contacts" placement="top">
						<view class="text-ellipsis w-100">
							<text>{{row.Contacts}}</text>
						</view>
					</el-tooltip>
				</template>
			</el-table-column>
			<el-table-column label="企业名称">
				<template v-slot="{row}">
					<el-tooltip effect="dark" :content="row.Enterprise_Name" placement="top">
						<view class="text-ellipsis w-100">
							<text>{{row.Enterprise_Name}}</text>
						</view>
					</el-tooltip>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog title="" :visible.sync="dialogVisible" width="80%">
			<el-table :data="orderData" border style="width: 97%;">
				<el-table-column prop="number" label="总数量" width="70"></el-table-column>
				<el-table-column prop="acquisition" label="收购量" width="70"></el-table-column>
				<el-table-column prop="price" label="价格" width="55"></el-table-column>
				<el-table-column prop="enterprise" label="所属企业" width="85"></el-table-column>
				<el-table-column prop="contacts" label="联系人" width="70"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" prop="contactsphone" label="联系人电话"
					width="110"></el-table-column>
				<el-table-column prop="package" label="包装方式" width="105"></el-table-column>
				<el-table-column prop="payment" label="支付方式" width="85"></el-table-column>
				<el-table-column prop="remit" label="付款方式" width="80"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" effect="dark" prop="logistics" label="物流方式"
					width="85"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" effect="dark" prop="state" label="状态"
					width="85"></el-table-column>
				<el-table-column :show-overflow-tooltip="true" effect="dark" prop="time" label="预约时间"
					width="85"></el-table-column>
			</el-table>
		</el-dialog>
		<view class="flex bg-white" style="justify-content: space-between;">
			<view class="">

			</view>
			<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="form.page" :page-sizes="[1,5,10,20]" :page-size="form.limit"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</view>
	</view>

</template>

<script>
	const app = getApp()
	import {
		GroupSeekProcureAllAction,
		GroupProcureAllAction,
		GroupProcureAll,
		getGroupSeekMessageAllAction
	} from '@/api/group.js'
	import {
		getGroupSeekTransactionAllAction
	} from '@/api/purchasedgoods.js'
	import {
		log
	} from 'util';
	export default {
		name: "procure",

		data() {
			return {
				currentPage1: 5,
				currentPage2: 5,
				currentPage3: 5,
				currentPage4: 4,
				Domain_IMG: app.globalData.Domain_IMG,
				dialogVisible: false,
				form: {
					Enterprise_Info_SerialNumber: uni.getStorageSync('loginInfo').enterprise,
					Article_Name: '',
					Type: "0",
					page: 1, //页数
					limit: 10, //每页数据条数
				},
				form3: {
					hotspot: '0', //0是消息1消息提示
					Type: "1", //1是自己0是全部
					Row_Status: '', //空是全部0是未读1是已读2是删除
					token: uni.getStorageSync('loginInfo').token,
					Enterprise_Info_SerialNumber: uni.getStorageSync('loginInfo').enterprise,
					page: 1, //页数
					limit: 5, //每页数据条数
				},
				limit1:0,
				limit2:0,
				total: 0,
				total1: 0,
				tableData: [],
				tableData2: [],
				form1: {
					Article_Name: "",
					Category_SerialNumber: "",
					Enterprise_Info_SerialNumber: "",
					Type: "0",
					page: 1, //页数
					limit: 5, //每页数据条数
				},
				row: {},
				form2: {
					Type: "1",
					Article_Name: '',
					Row_Status: '',
					Group_Seek_Purchase_SerialNumber: "",
					Enterprise_Info_SerialNumber: uni.getStorageSync("loginInfo").enterprise,
					page: 1, //页数
					limit: 5, //每页数据条数
				},
				orderData: [],
			};
		},
		mounted() {
			this.getList(this.form);
			this.getData(this.form1)
			this.getList2(this.form2)
			this.getList1(this.form3)
		},
		methods: {
			async getData(data) { //分页查询所有供应数据
				const res = await GroupProcureAllAction({
					data,
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					uni.removeStorageSync('loginInfo');
					const res = await GroupProcureAll({
						data,
					})
					if (res.Status == 'success') {
						this.tableData2 = res.tableData;
					}
				} else if (res.Status == 'success') {
					this.tableData2 = res.tableData;
					console.log(this.tableData2)
				}
			},
			async getList1(data) {
				const res = await getGroupSeekMessageAllAction({
					data
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else if (res.Status == 'success') {
					console.log(res)
					this.limit1 = Number(res.limit)
				}
			},
			async getList2(data) {
				//分页查询所有采购数据
				const res = await getGroupSeekTransactionAllAction({
					data,
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					uni.navigateTo({
						url:'/pages/login/login?expire=1'
					})
				} else if (res.Status == 'success') {
					this.limit2 = parseInt(res.limit)
				}
			},
			handleclick() {
				uni.navigateTo({
					url: '/pages/release/purchase-release'
				})
			},
			handleCurrentChange(e) {
				this.form.page = e
				this.getList(this.form)
			},
			handleSizeChange(e) {
				this.form.page = 1
				this.form.limit = e
				this.getList(this.form)
			},
			Select() {
				this.getList(this.form)
			},
			handleCurrentChange1(e) {
				console.log(e)
				this.row.form.page = e
				this.ExpandChange(this.row)
			},
			handleSizeChange1(e) {
				this.row.form.page = 1
				this.row.form.limit = e
				this.ExpandChange(this.row)
			},
			myPurchase(boolean) {
				if (boolean) {
					this.$emit('myPurchase')
				} else {
					this.$emit('messagelist', 'first')
				}
			},
			async getList(data) {
				//分页查询所有采购数据
				const res = await GroupSeekProcureAllAction({
					data,
				})
				console.log(res);
				if (res.redirect && res.redirect == 'REDIRECT') {
					uni.navigateTo({
						url: '/pages/login/login?expire=1'
					})
				} else if (res.Status == 'success') {
					this.tableData = res.tableData
					this.total = parseInt(res.limit)
				}
			},
			async ExpandChange(e) {
				console.log(e)
				this.row = e
				const res = await getGroupSeekTransactionAllAction({
					data: e.form
				})
				if (res.redirect && res.redirect == 'REDIRECT') {
					uni.navigateTo({
						url: '/pages/login/login?expire=1'
					})
				} else if (res.Status == 'success') {
					e.orderData = res.tableData
					e.total = res.limit
				}
			}
		}
	};
</script>

<style>
	.content {
		width: 100%;
		padding: 30rpx;

		background-color: #fff;

		.el-form {
			display: flex;
			flex-wrap: wrap;
		}
	}
</style>